import React, { Component } from 'react';
import { Card, Table, Divider, Button,  Modal, Form, Input, Row, Col, Select, Radio, DatePicker, Upload, Icon, Popconfirm } from 'antd';


import styles from './style.less';
import moment from 'moment'



const EditModal = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        state = {
            loading: false
        }

        render() {
            const formItemLayout = {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 },
            }
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator } = form
            return (
                <Modal
                    visible={visible}
                    title="添加产业资金奖励情况"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                    style={{top: '33px'}}
                >
                    <Form className={styles.loginForm} style={{width: '85%'}}>
                        <Form.Item label="给予部门" {...formItemLayout} required={false}>
                            {getFieldDecorator('reward_department', {
                                rules: [{ required: true, message: '请输入!'}],
                            })(<Input placeholder="请输入"/>)}
                        </Form.Item>
                        <Form.Item label="项目名称" {...formItemLayout} required={false}>
                            {getFieldDecorator('reward_project', {
                                rules: [{ required: true, message: '请输入!'}],
                            })(<Input placeholder="请输入"/>)}
                        </Form.Item>
                        <Form.Item label="奖励金额" {...formItemLayout} required={false}>
                            {getFieldDecorator('reward_money', {
                                rules: [{ required: true, message: '请输入!'}],
                            })(<Input placeholder="请输入"/>)}
                        </Form.Item>
                        <Form.Item label="奖励时间" {...formItemLayout} required={false}>
                            {getFieldDecorator('reward_date', {
                                rules: [{ required: true, message: '请选择!'}],
                            })(<DatePicker style={{ width: '100%' }}/>)}
                        </Form.Item>
                    </Form>
                </Modal>
            )
        }
    }
)


// eslint-disable-next-line react/prefer-stateless-function
class Reward extends Component {
    state = {
        visible: false,
        // status记录新增产品 1 或编辑产品状态 0 
        status: 1,
        // 编辑产品的key
        editKey: '',
        columns: [
            {
                title: '奖励时间',
                dataIndex: 'reward_date',
                align: 'center',
                render: record => (
                    <span>{moment(record).format("YYYY-MM-DD")}</span>
                )
            },
            {
                title: '给予部门',
                dataIndex: 'reward_department',
                align: 'center'
            },
            {
                title: '奖励金额（万元）',
                dataIndex: 'reward_money',
                align: 'center'
            },
            {
                title: '项目名称',
                dataIndex: 'reward_project',
                align: 'center'
            },
            {
                title: '操作',
                dataIndex: 'address',
                align: 'center',
                render: (_, record) => (
                    <>
                        <a onClick={() => this.editShowModal(record)}>
                            编辑
                        </a>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="你确定要删除吗？"
                            onConfirm={() => this.deleteOptions(record)}
                            okText="是"
                            cancelText="否"
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </>
                  ),
            },
        ],
        showColumns: [
            {
                title: '奖励时间',
                dataIndex: 'reward_date',
                align: 'center',
                render: record => (
                    <span>{moment(record).format("YYYY-MM-DD")}</span>
                )
            },
            {
                title: '给予部门',
                dataIndex: 'reward_department',
                align: 'center'
            },
            {
                title: '奖励金额（万元）',
                dataIndex: 'reward_money',
                align: 'center'
            },
            {
                title: '项目名称',
                dataIndex: 'reward_project',
                align: 'center'
            }
        ],
    }
    
    // 新增产品
    createShowModal = () => {
        const { form } = this.formRef.props
        form.resetFields()
        this.setState({
            status: 1,
            visible: true
        })
    }

    // 编辑产品
    editShowModal = record => {
        this.editKey = record.key
        const { form } = this.formRef.props
        this.setState({ 
            status: 0,
            visible: true,
            editKey: record.key
        })
        form.setFieldsValue({
            ...record,
            reward_date: moment(moment(record.reward_date).format("YYYY-MM-DD")),
        })
    }

    // 删除产品
    deleteOptions = record => {
        const { deleteClick } = this.props
        deleteClick(record.key)
    }

    handleCreate = () => {
        const { form } = this.formRef.props
        const { confirm } = this.props
        // 判断编辑还是新增
        // 新增
        if (this.state.status) {
            form.validateFields((err, values) => {
                if (err) { return; }
                values.reward_date = moment(values.reward_date).valueOf()
                confirm(values, 'add')
                this.setState({ visible: false })
            })
            return;
        }
        // 编辑
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            values.reward_date = moment(values.reward_date).valueOf()
            confirm(values, 'edit', this.state.editKey)
            this.setState({ visible: false })
        })
    }

    handleCancel = () => { this.setState({ visible: false }) }

    saveFormRef = formRef => { this.formRef = formRef }


    render () {
        const { type } = this.props
        const EditHead = () => {
            if (type === 'edit') {
                return (
                    <Card
                        className={styles.basicHeadLayout}
                        bordered={false}
                    >
                        <div className={styles.headName}>五、产业资金奖励情况</div>
                        <Button type="primary" onClick={this.createShowModal}>添加</Button>
                    </Card>
                )
            }
            return (<></>)
        }
        return (
            <div>
                <EditHead />
                <Card bordered={false} className={styles.publicContent}>
                    <Table
                        columns={ type === 'edit' ? this.state.columns : this.state.showColumns}
                        dataSource={this.props.data}
                        bordered
                        pagination={ type === 'edit' ? { defaultPageSize: 2 } : false }

                    />
                </Card>
                <EditModal 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
            </div>
            
        )
    }
}

// eslint-disable-next-line react/prefer-stateless-function

export default Reward